<template>
  <px-dialog v-model="visible" title="状态点位选择" @close="handelCancel">
    <div class="equip-wrap-common" style="height: auto">
      <px-form class="custom-form-ui equip-form" :model="form" label-position="right" label-width="120px" @submit.prevent>
        <px-row :gutter="16">
          <px-col :span="8">
            <px-form-item label="点位编码">
              <px-input
                v-model="form.tagCode"
                placeholder="点位编码"
                maxlength="50"
                clearable
                @blur="form.tagCode = $event.target.value.trim()"
                @keyup.enter="getList"
              >
                <template #suffix>
                  <px-icon class="pointer" @click="getList"><Search /></px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="getList">查询</px-button>
            <px-button @click="handleReset">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" height="360" border @selection-change="handleSelectionChange">
        <px-table-column width="60" type="selection" />
        <px-table-column label="序号" min-width="60" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (paginationInfo.pageNum - 1) * paginationInfo.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column prop="tagCode" label="点位编码" show-overflow-tooltip />
        <px-table-column prop="tagComment" label="点位描述" show-overflow-tooltip />
        <px-table-column prop="tagUnitDesc" label="点位单位" show-overflow-tooltip />
        <px-table-column prop="dataType" label="数据类型" show-overflow-tooltip />
        <px-table-column prop="isConstantDesc" label="是否常量点位" show-overflow-tooltip />
        <px-table-column prop="eqpId" label="设备编码" show-overflow-tooltip />
        <px-table-column prop="positionNameAll" label="物理位置信息" show-overflow-tooltip />
      </px-table>
      <pagination
        v-show="paginationInfo.total > 0"
        v-model:page="paginationInfo.pageNum"
        v-model:limit="paginationInfo.pageSize"
        :total="paginationInfo.total"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="handelCancel">取消</px-button>
        <px-button type="primary" :disabled="!selectedRows.length" @click="handleSubmit"> 确定 </px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";

import { pagePointList } from "@/api/system/pointManage";

import type { IPropsTypeForPoint, IEmitsTypeForPoint } from "../../type";

const props = defineProps<IPropsTypeForPoint>();
const emits = defineEmits<IEmitsTypeForPoint>();

const tableData = ref([]);
const visible = ref(true);
const form = ref({
  tagCode: ""
});
const paginationInfo = ref({
  pageNum: 1,
  pageSize: 20,
  total: 0
});
const selectedRows = ref([]);

const params = computed(() => {
  return {
    eqpId: props.eqpId,
    tagCode: form.value.tagCode,
    pageNum: paginationInfo.value.pageNum,
    pageSize: paginationInfo.value.pageSize
  };
});

const getList = async () => {
  const res = await pagePointList(params.value);
  paginationInfo.value.total = res.total;
  if (res.total > 0) {
    tableData.value = res.data;
  } else {
    tableData.value = [];
  }
};

const handleReset = () => {
  form.value.tagCode = "";
  getList();
};

const handleSelectionChange = rows => {
  selectedRows.value = rows;
};

const handelCancel = () => {
  emits("close");
};
const handleSubmit = () => {
  emits("select", selectedRows.value);
  handelCancel();
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
